<template>
    <!-- 导航区域 -->
    <div>
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>健康管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 搜索区域 -->
    <div style="margin: 10px 0">
        <el-button type="primary" style="margin-right: 20px;" @click="addopen"><el-icon><Plus /></el-icon>添加宠物健康信息</el-button>
        <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="请输入宠物名" v-model="petsname"></el-input>
        <el-input style="width: 200px; cursor: pointer" suffix-icon="el-icon-search" placeholder="请输入宠物疾病" v-model="petsdisease"></el-input>
        <el-button type="primary" @click="gethealthList">搜 索</el-button>
        <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <!-- 主体区域 -->
    <el-table :data="healthList" border style="width: 100%">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="宠物id" prop="petsid" />
      <el-table-column label="宠物名称" prop="petsname" />
      <el-table-column label="宠物年龄(岁)" prop="petsage" />
      <el-table-column label="宠物疾病" prop="petsdisease" />
      <el-table-column label="使用药品" prop="petsdrug" />
      <el-table-column label="治疗时间" prop="petstime" />
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">修 改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNum"
                  :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
      </el-pagination>
    </div>
    <!-- 新增区域 -->
    <el-dialog v-model="dialogVisible" title="宠物信息" width="30%">
      <el-form label-width="70px" size="small">
        <el-form-item label="宠物id" v-if="form.id == null">
          <el-input size="small" v-model="form.petsid" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物名称">
          <el-input size="small" v-model="form.petsname" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物年龄">
          <el-input v-model="form.petsage" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="宠物疾病">
          <el-input v-model="form.petsdisease" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="使用药品">
          <el-input v-model="form.petsdrug" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="治疗时间">
          <el-input v-model="form.petstime" type="date" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
    export default{
      name: "HealthView",
      data() {
        return {
          healthList: [],
          dialogVisible: false,
          form: {},
          petsname: "",
          petsdisease: '',
          pageNum: 1,
          pageSize: 10,
          total: 0,
        }
      },
      created() {
        this.gethealthList();
      },
      methods:{
        //新增健康框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //搜索框重置方法
        reset() {
          (this.petsname = ""), (this.petsdisease = ''), this.gethealthList();
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize;
          this.gethealthList();
        },
        handleCurrentChange(pageNum) {
          this.pageNum = pageNum;
          this.gethealthList();
        },
         //修改模态框展开并且获取原本数据方法
         handleEdit(healthid) {
          this.dialogVisible = true;
          this.$http.get("/health/" + healthid).then((res) => {
            if (res.data.status == 200) {
              this.form = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //删除健康方法
        handleDelete(healthid) {
          this.$http.delete("/health/" + healthid).then((res) => {
            if (res.data.status == 200) {
              this.$message.success("删除成功"), 
              this.gethealthList();
            } else {
              this.$message.error("删除失败");
            }
          });
        },
        //修改新增健康方法
        save() {
          this.$http.post("/health/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("保存成功"),
                this.dialogVisible = false,
                this.gethealthList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取健康列表
        gethealthList() {
          //请求分页查询数据
          let params = {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            petsname: this.petsname,
            petsdisease: this.petsdisease,
          };
          this.$http.get("/health/page", { params }).then((res) => {
            console.log(res);
            if (res.data.status == 200) {
              this.healthList = res.data.data.records;
              this.total = res.data.data.total;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
      }
    }
</script>

<style>

</style>